<template>
  <div class="dropdown">
    <span style="color: white;line-height: 40px;display: inline-block; height: 40px; float: left;">{{selectedOption}}</span>

    <img style="width: 30px;height: 40px;float: left;" src="./up.png" @click="toggleDropdown">
    <ul v-show="isDropdownOpen"  class="dropdown-menu">
      <li v-for="option in options"  :key="option.id" @click="selectOption(option)">
        {{ option.label }}
      </li>
    </ul>
  </div>
</template>
<script setup>
import {ref} from "vue";

const isDropdownOpen = ref(false);
const selectedOption = ref('请选择')
const props=defineProps({
  options:{
    type:Array,
    default:() => [
      { id: 1, label: '默认选项1' },
      { id: 2, label: '默认选项2' },
      { id: 3, label: '默认选项3' },
    ]
  }
})
const  emits = defineEmits(['select'])

const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
}
const selectOption = (option) => {
  selectedOption.value= option.label;
  isDropdownOpen.value = false;
  emits('select', option);
}

</script>
<style>
.dropdown {
  position: relative;
  border: 1px solid #409EFF;
  padding: 0 8px;
}

.dropdown-toggle {

  padding: 0.5rem 1rem;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  bottom: 44px;
  right: 0px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid #409EFF;
}

.dropdown-menu li {
  padding: 0.5rem 1rem;
  background-color: #00192e;
  cursor: pointer;
  color: white;

}

.dropdown-menu li:hover {
  background-color: #2c3e50;
}
</style>